<template>
  <view class="w100 p-all-20">
    <uni-card margin="0">
      <view>
        <view class="inforClass">
          <text>试卷名称：</text>
          <uni-tooltip :content="itemData.name" placement="top" style="flex: 1">
            <view class="ellipsis-text">{{ itemData.name }}</view>
          </uni-tooltip>
        </view>
        <view class="rowsb rowsm mt-20 fs-24">
          <view style="width: 50%">
            <text class="fw-600 fs-26"> 实践课程：</text>
            <text>
              {{ (taskType.find(v => v.value == itemData.practiceType) || {}).name }}
            </text>
          </view>
          <view style="width: 50%">
            <text class="fw-600 fs-26"> 试卷状态：</text>
            <text>{{ itemData.status == 1 ? '未开始' : itemData.status == 2 ? '进行中' : itemData.status == 3 ? '已结束' : ''
            }}</text>
          </view>
        </view>
        <!-- <view class="rowsb rowsm mt-20 fs-26">
          <view style="width: 50%">
            <text class="fw-600 fs-26"> 总人数：</text>
            <text>{{ itemData.allPeople }}</text>
          </view>
          <view style="width: 50%">
            <text class="fw-600 fs-26"> 已提交人数：</text>
            <text>{{ itemData.submittedPeoples }}次</text>
          </view>
        </view> -->
      </view>
      <view class="rowsb rowsm mt-20 fs-24">
        <uni-tooltip :content="proxyNameList.join(',')" placement="top">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 面向学院：</text>
            <text>{{ proxyNameList.join(',') }}</text>
          </view>
        </uni-tooltip>
        <uni-tooltip :content="prozyNameList.join(',')" placement="top">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 面向专业：</text>
            <text> {{ prozyNameList.join(',') }}</text>
          </view>
        </uni-tooltip>
      </view>
      <view class="rowsb rowsm mt-20 fs-24">
        <uni-tooltip :content="probjNameList.join(',')" placement="top">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 面向班级：</text>
            <text>{{ probjNameList.join(',') }}</text>
          </view>
        </uni-tooltip>
        <uni-tooltip :content="itemData.faceNj" placement="top">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 面向年级：</text>
            <text>{{ itemData.faceNj }}</text>
          </view>
        </uni-tooltip>
      </view>
      <view class="ellipsis-text mt-20 fs-24">
        <text class="fw-600 fs-26"> 实践任务时间：</text>
        <text>{{ itemData.startTime.slice(0, 10) }}~{{ itemData.endTime.slice(0, 10) }}</text>
      </view>
      <view class="rowsb rowsm pt-10 fs-24">
        <!-- <view style="width: 50%">
            <text class="fw-600 fs-26"> 未提交人数：</text>
            <text>{{ itemData.unSubmittedPeoples }}</text>
          </view> -->
        <view style="width: 50%">
          <text class="fw-600 fs-26"> 积分上限：</text>
          <text>{{ itemData.score }}</text>
        </view>
      </view>
    </uni-card>

    <uni-card>
      <view class="inforClass"> 完成情况 </view>

      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff"
          @clickItem="onClickItem" />
      </view>
      <view class="content mt-20">
        <view v-if="current === 0">
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">学 院</view>
            <uni-data-select v-model="queryParams.faceXy" :localdata="xyNameList"></uni-data-select>
          </view>
          <view class="rowsb mb-20" style="justify-content: end;color: #949494">
            <view>共{{ list.length }}个学院</view>
          </view>
          <view class="item-warp" v-for="item in list" :key="item.id">
            <view>
              <text class="title">{{ item.xyName }}</text>
            </view>
            <view class="rows rowsm rowsb fs-28 mt-10 mb-10">
              <text>总人数：{{ item.allPeople }}</text>
              <text>已提交人数：{{ item.submittedPeoples }}</text>
            </view>
            <view class="rows rowsm rowsb fs-28">
              <text>未提交人数：{{ item.unSubmittedPeoples }}</text>
              <text>已提交平均积分数：{{ item.submittedAverage }}</text>
            </view>
          </view>
          <view v-if="list.length == 0" class="notYet">
            暂无数据
          </view>
        </view>
        <view v-if="current === 1" class="content-warp">
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">学 院</view>
            <uni-data-select v-model="queryParams.faceXy" :localdata="xyNameList"></uni-data-select>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">专 业</view>
            <uni-data-select v-model="queryParams.faceZy" :localdata="zyNameList" :key="componentKeyZy"></uni-data-select>
          </view>
          <view class="rowsb mb-20" style="justify-content: end;color: #949494">
            <view>共{{ list.length }}个专业</view>
          </view>
          <view class="item-warp" v-for="item in list" :key="item.id">
            <view>
              <text class="title">{{ item.xyName }}</text>
              <text class="title" v-if="item.zyName">- {{ item.zyName }}</text>
            </view>
            <view class="rows rowsm rowsb fs-28 mt-10 mb-10">
              <text>总人数：{{ item.allPeople }}</text>
              <text>已提交人数：{{ item.submittedPeoples }}</text>
            </view>
            <view class="rows rowsm rowsb fs-28">
              <text>未提交人数：{{ item.unSubmittedPeoples }}</text>
              <text>已提交平均积分数：{{ item.submittedAverage }}</text>
            </view>
          </view>

          <view v-if="list.length == 0" class="notYet">
            暂无数据
          </view>
        </view>
        <view v-if="current === 2">
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">学 院</view>
            <uni-data-select v-model="queryParams.faceXy" :localdata="xyNameList"></uni-data-select>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">专 业</view>
            <uni-data-select v-model="queryParams.faceZy" :localdata="zyNameList" :key="componentKeyZy"></uni-data-select>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">班 级</view>
            <uni-data-select v-model="queryParams.faceBj" :localdata="bjNameList" :key="componentKeyBj"></uni-data-select>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="width: 19%; margin-top: 0;">姓 名</view>
            <u--input style="flex: 1;margin-left: 0;" placeholder="请输入" border="surround"
              v-model="queryParams.studentName" size="mini" @change="queryParams.currentPage = 1, getListXs()"></u--input>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="width: 19%; margin-top: 0;">学 号</view>
            <u--input style="flex: 1;margin-left: 0;" placeholder="请输入" border="surround" size="mini"
              v-model="queryParams.stNumber" @change="queryParams.currentPage = 1, getListXs()"></u--input>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <view class="title ml-10" style="flex: 1; margin-top: 0;">状 态</view>
            <uni-data-select v-model="queryParams.status" :localdata="statusList"></uni-data-select>
          </view>
          <view class="rowsb mb-20" style="justify-content: space-between;">
            <view style="color: #0074FF;" @click="resetQuery">重 置</view>
            <view style="color: #949494;">共{{ total }}个学生</view>
          </view>
          <view class="item-warp" v-for="item in studentList" :key="item.id"
            @click="item.state === '1' ? goPage(item) : ''">
            <view>
              <text class="title">{{ item.xyName }}</text>
              <text class="title" v-if="item.zyName">- {{ item.zyName }}</text>
              <text class="title" v-if="item.bjName">- {{ item.bjName }}</text>
            </view>
            <view class="rows rowsm rowsb fs-24 mt-10 mb-10">
              <view>
                <text class="fs-26 fw-600"> 姓名：</text>
                {{ item.studentName }}
              </view>
              <view>
                <text class="fs-26 fw-600"> 学号：</text>
                {{ item.stNumber }}
              </view>
            </view>
            <view class="rows rowsm rowsb fs-24">
              <view>
                <text class="fs-26 fw-600"> 积分：</text>
                {{ item.score }}
              </view>
              <view>
                <text class="fs-26 fw-600"> 提交时间：</text>
                {{ item.createTime || '' }}
              </view>
            </view>
          </view>
          <view v-if="studentList.length == 0" class="notYet">
            暂无数据
          </view>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      itemData: {},
      tatol: 0,
      queryParams: {},
      list: [],
      studentList: [],
      taskType: [
        // { name: '劳动教育', value: 1 },
        // { name: '职业素养', value: 2 },
        // { name: '应急安全', value: 3 },
        // { name: '思政实践', value: 4 },
        // { name: '创新创业', value: 5 }
      ],
      prozyNameList: [],
      proxyNameList: [],
      probjNameList: [],
      xyId: null,
      zyId: null,
      bjId: null,
      items: ['学院列表', '专业列表', '学生列表'],
      current: 0,
      xyNameList: [],
      zyNameList: [],
      componentKeyZy: 0,
      bjNameList: [],
      componentKeyBj: 0,
      total: 0,
      statusList: [
        { text: '未提交', value: '0' },
        { text: '已提交', value: '1' },
      ]
    };
  },
  watch: {
    'queryParams.faceXy': {
      handler(newValue, oldValue) {
        if (!newValue && oldValue === undefined) return
        if (this.current === 0) {
          this.getListXy();
        } else if (this.current === 1) {
          this.queryParams.faceZy = null;
          this.getZyList();
          this.getListZy();
        } else if (this.current === 2) {
          this.queryParams.faceZy = null;
          this.queryParams.faceBj = null;
          this.queryParams.currentPage = 1;
          this.getZyList();
          this.getBjList();
          this.getListXs();
        }
      }
    },
    'queryParams.faceZy': {
      handler(newValue, oldValue) {
        if (!newValue && oldValue === undefined) return
        if (this.current === 1) {
          this.getListZy();
        } else if (this.current === 2) {
          this.queryParams.faceBj = null;
          this.queryParams.currentPage = 1;
          this.getBjList();
          this.getListXs();
        }
      }
    },
    'queryParams.faceBj': {
      handler(newValue, oldValue) {
        if (!newValue && oldValue === undefined) return
        if (this.current === 2) {
          this.queryParams.currentPage = 1;
          this.getListXs();
        }
      }
    },
    'queryParams.status': {
      handler(newValue, oldValue) {
        if (!newValue && oldValue === undefined) return
        if (this.current === 2) {
          this.queryParams.currentPage = 1;
          this.getListXs();
        }
      }
    },
  },
  onLoad(e) {
    this.title = e.title;
    this.itemData = JSON.parse(e.item);
    this.getTypeCongfigList();
    if (this.itemData.faceZy) {
      this.getListProxy();
      this.getListProzy();
      this.getListProbj();
    }
    this.getXyList();
    this.getListXy();
    uni.setNavigationBarTitle({
      title: '知识问答完成情况'
    })

  },
  // 下拉到底部后加载新数据
  onReachBottom() {
    if (this.studentList.length < this.total) {
      this.queryParams.currentPage++;
      this.getListXs();
    }
  },
  methods: {
    getTypeCongfigList() {
      this.$tools.axiosFromToken('GET', 'project/practice/type/config/list?pageNum=1&pageSize=50', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        res.rows.forEach(item => {
          this.taskType.push({ name: item.name, value: item.id })
        })
      })
    },
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.queryParams = {};
        this.list = [];
        this.studentList = [];
        this.current = e.currentIndex;
        if (e.currentIndex == 0) {
          this.getListXy();
        } else if (e.currentIndex == 1) {
          this.getZyList();

          this.getListZy();
        } else if (e.currentIndex == 2) {
          this.queryParams = {
            currentPage: 1,
            currentSize: 10
          };
          this.getBjList();

          this.getListXs();
        }
      }
    },
    getListXy() {
      !this.queryParams.faceXy ? delete this.queryParams.faceXy : '';
      this.$tools.axiosFromToken('GET', `test/paper/user/quizXy`, { id: this.itemData.id, ...this.queryParams }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.list = res.rows;
      })
    },
    getListZy() {
      !this.queryParams.faceXy ? delete this.queryParams.faceXy : '';
      !this.queryParams.faceZy ? delete this.queryParams.faceZy : '';
      this.$tools.axiosFromToken('GET', `test/paper/user/quizZy`, { id: this.itemData.id, ...this.queryParams }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.studentList = [];
        this.list = [];
        this.list = res.rows;
      })
    },
    getListXs() {
      if (!this.queryParams.currentPage) return
      !this.queryParams.faceXy ? delete this.queryParams.faceXy : '';
      !this.queryParams.faceZy ? delete this.queryParams.faceZy : '';
      !this.queryParams.faceBj ? delete this.queryParams.faceBj : '';
      !this.queryParams.studentName ? delete this.queryParams.studentName : '';
      !this.queryParams.stNumber ? delete this.queryParams.stNumber : '';
      this.$tools.axiosFromToken('GET', `test/paper/user/quizXs`, { id: this.itemData.id, ...this.queryParams }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        if (this.queryParams.currentPage == 1) {
          this.studentList = res.data.data;
        } else {
          this.studentList = this.studentList.concat(res.data.data);
        }
        this.total = res.data.total;
      })
    },
    // 查询学院
    getListProxy() {
      this.$tools.axiosFromToken('GET', 'project/proxy/listTotal', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.proxyNameList = [];
        res.rows.forEach(v => {
          this.itemData.faceXy.split(',').forEach(y => {
            if (v.id == y) {
              this.proxyNameList.push(v.name)
            }
          })
        })
      })
    },

    getListProzy() {
      this.$tools.axiosFromToken('GET', 'project/prozy/listTotal', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.prozyNameList = [];
        res.rows.forEach(v => {
          this.itemData.faceZy.split(',').forEach(y => {
            if (v.id == y) {
              this.prozyNameList.push(v.name)
            }
          })
        })
      })
    },
    getListProbj() {
      this.$tools.axiosFromToken('GET', 'project/probj/listTotal', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.probjNameList = [];
        res.rows.forEach(v => {
          this.itemData.faceBj.split(',').forEach(y => {
            if (v.id == y) {
              this.probjNameList.push(v.name)
            }
          })
        })
      })
    },

    // 查询学院
    getXyList() {
      let xyIds = this.itemData.faceXy.split(',');
      xyIds.forEach(v => {
        v = String(v);
      });
      this.$tools.axiosFromToken('GET', 'project/proxy/listTotal', { xyIds }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        res.rows.forEach(v => {
          this.xyNameList.push({ text: v.name, value: v.id })
        })
      })
    },

    getZyList() {
      let zyIds = this.itemData.faceZy.split(',');
      zyIds.forEach(v => {
        v = String(v);
      });
      const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
      this.$tools.axiosFromToken('post', 'project/prozy/listTotalForPost', { xyIds: faceXys, zyIds }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.zyNameList = res.rows.map(item => ({ text: item.name, value: item.id, }))
        this.componentKeyZy = new Date().getTime();
      })
    },
    getBjList() {
      let bjIds = this.itemData.faceBj.split(',');
      bjIds.forEach(v => {
        v = String(v);
      });

      const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
      const faceZys = !this.queryParams.faceZy ? null : [this.queryParams.faceZy];

      this.$tools.axiosFromToken('post', 'project/probj/listTotalForPost', { xyIds: faceXys, zyIds: faceZys, bjIds }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.bjNameList = res.rows.map(item => ({ text: item.name, value: item.id, }))
        this.componentKeyBj = new Date().getTime();
      })
    },
    goPage(row) {
      let data = {
        ...this.itemData,
        userXyName: row.xyName,
        userZyName: row.zyName,
        userBjName: row.bjName,
        studentName: row.studentName,
        haveScore: row.score,
      };
      this.$tools.goNext(`/pagesCopy/trivia/analyze?item=${JSON.stringify(data)}&userId=${row.id}`)
    },
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        currentSize: 10,
      };
      this.getListXs();
    },

  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f5f7;
}

.crumbs {
  margin: 10px 0;
  display: flex;

  .fwStyle {
    white-space: nowrap;
    margin: 0 10rpx;
    color: #1890ff;
    cursor: pointer;
  }
}

::v-deep .uni-card {
  margin-left: 5px !important;
  margin-right: 5px !important;
  overflow: visible;

  .uni-card__content {
    color: #000;
  }
}

::v-deep .uni-tooltip {
  width: 50%;
  display: flex;
}

::v-deep .uni-tooltip-popup {
  top: 20px;
  right: 0;
  text-align: justify;
  word-wrap: break-word;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  align-items: center;
}

.mark {
  text-align: right;
  color: #f92929;
}

.item-warp {
  padding: 24rpx;
  width: 100%;
  background: #f4f5f7;
  border-radius: 10px;
  margin-bottom: 18rpx;
}

.content-warp {
  color: #333;
  font-size: 24rpx;

  .txt-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.txt-warp {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;

  .left,
  .center,
  .right {
    text {
      display: block;
      white-space: nowrap;
      font-size: 24rpx;
      color: #333;
      margin-bottom: 20rpx;
    }
  }
}

.txt {
  font-size: 24rpx;
  color: #333;
}

.title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-top: 30rpx;
}

.task-require {
  margin-top: 30rpx;
  border: 1px solid #c2bfbf;
  padding: 20rpx;
  border-radius: 10rpx;

  .title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-top: 10rpx;
  }

  .txt {
    font-size: 24rpx;
    color: #4e4e4e;
    margin-top: 10rpx;
  }
}

.btn {
  width: 20%;
  font-size: 26rpx;
  border: 1px solid;
  padding: 10rpx;
  border-radius: 20px;
  text-align: center;
  background: #fff;
}

.warp {
  overflow: auto;
}

.notYet {
  margin-top: 50rpx;
  width: 100%;
  text-align: center;
  font-weight: 0 !important;
  font-size: 42rpx;
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 20px;
  background-color: #007AFF;
  margin-right: 5px;
  display: inline-block;
}

::v-deep .segmented-control__item--text {
  border-bottom-width: 0 !important;
}

::v-deep .segmented-control__item {
  border: 1px solid #dfe4ed !important;
  border-right: 0 !important;
}

::v-deep .segmented-control__item:last-child {
  border-right: 1px solid #dfe4ed !important;
}

::v-deep .uni-stat__select {
  width: 80%;
  padding: 0 !important;

  .uni-select__input-placeholder {
    color: #c0c4cc !important;
  }

  view {
    width: 100%;
  }
}
</style>
